<template>
	<Layout showBack navColor="#fff" bg-color="#fff">
		<view class="page-container">


			<view class="w-100">
				<!-- <view class="">
						<u--text type="primary" text="注销"></u--text>
				</view> -->
				<text class="register-title">请选择要注册的产品信息</text>
			</view>

			<u--form ref="form" labelPosition="left" :model="ruleForm" :rules="rules" :labelWidth="80">
				<u-form-item label="商标名" prop="brandTitle">
					<view class="register-item" @click="handlePickerSelect('brandTitle')">{{ruleForm.brandTitle }}
					</view>
				</u-form-item>
				<u-form-item label="产品名" prop="productTitle">
					<view class="register-item" @click="handlePickerSelect('productTitle')">{{ruleForm.productTitle }}
					</view>
				</u-form-item>
			</u--form>

			<!-- 按钮 -->
			<view class="register-button">
				<u-button type="primary" text="产品注册" @click="handleReadyRegister"></u-button>
			</view>
		</view>
		<!-- picker 选择 -->
		<u-picker v-if="showPicker" ref="picker" :show="showPicker" :columns="pickerColumns" :immediateChange="true"
			@confirm="handlePickerConfirm" @cancel="handlePickerClose"></u-picker>
		<!-- 相机 -->
		<RegisterCamera v-if="showScan" ref="scanRef" mode="scanCodde" @change="handleProductRegister"
			@close="handleScanClose" />

		<!-- 提示 -->
		<u-toast ref="uToast"></u-toast>
	</Layout>
</template>

<script>
	import {
		fetchVerifyCode,
		fetchProductRegister,
		fetchBrandList,
		fetchProductList
	} from '@/api/scan.js'
	import {
		formatQuery
	} from '@/utils/index.js'
	import RegisterCamera from '@/components/scan/scan.vue';

	export default {
		name: 'login',
		components: {
			RegisterCamera
		},
		data() {
			return {
				ruleForm: {
					brandTitle: '',
					productTitle: '',
				},
				rules: {},
				showPicker: false,
				pickerKey: '',
				showScan: false,
				brandEnum: [],
				productEnum: []
			}
		},
		computed: {
			pickerColumns() {
				switch (this.pickerKey) {
					case 'brandTitle':
						return [this.brandEnum]
					case 'productTitle':
						return [this.productEnum]
				}
			}
		},
		created() {
			this.handleGetBrands()
		},
		methods: {
			handleGetBrands() {
				fetchBrandList().then(res => {
					this.brandEnum = res
				})
			},
			handleGetProducts() {
				this.ruleForm.productTitle = ''
				this.productEnum = []

				fetchProductList(this.ruleForm.brandTitle).then(res => {
					this.productEnum = res
				})
			},
			handleProductRegister(path) {
				console.log('Product Register Change', this);
				const self = this
				return new Promise((resolve, reject) => {
					fetchProductRegister(path, {
						body: JSON.stringify({
							brandTitle: self.ruleForm.brandTitle,
							productTitle: self.ruleForm.productTitle,
						})
					}).then(res => {
						if (res.judge) {
							// self.$wxUtils.toast('注册成功!')
							this.$refs.uToast.show({
								message: '注册成功',
								position: 'bottom',
							});
						} else {
							switch (res.code) {
								case 1001: //未检测到二维码
									self.$refs.scanRef && self.$refs.scanRef.updateTips('请对准二维码！')
									break;
								case 1002: //该标签为假标（显示：请使用正品标签注册）
									self.$refs.scanRef && self.$refs.scanRef.updateTips('请使用正品标签注册！')
									break;
								case 1003: //该标签已注册（显示：该标签已注册）
									self.$refs.scanRef && self.$refs.scanRef.updateTips('该标签已注册！')
									break;
								case 1004: //注册成功（显示：注册成功）
									self.$refs.scanRef && self.$refs.scanRef.updateTips('注册成功！')
									break;
							}
						}
						resolve()
					}).catch(err => {
						console.log('err', err);
						reject()
					}).finally(() => {
						self.$refs.scanRef && self.$refs.scanRef.handleRestore()
					})
				})

			},
			handleReadyRegister() {
				if (this.ruleForm.brandTitle === '') {
					return this.$refs.uToast.show({
						message: '请选择品牌',
						position: 'bottom',
					});
				}

				if (this.ruleForm.productTitle === '') {
					return this.$refs.uToast.show({
						message: '请选择产品',
						position: 'bottom',
					});
				}

				uni.navigateTo({
					url: `/pages/checkH5/index${formatQuery({
						source:'register',
						brandTitle:this.ruleForm.brandTitle,
						productTitle:this.ruleForm.productTitle,
					})}`
				})

				// this.showScan = true

				// this.$nextTick(() => {
				// 	this.$refs.scanRef && this.$refs.scanRef.handleShow()
				// })
			},
			handlePickerSelect(type) {

				if (type == 'productTitle' && !this.productEnum.length) {
					return this.$refs.uToast.show({
						message: '选择的品牌未包含产品',
						position: 'bottom',
					});
				}

				this.pickerKey = type

				this.$nextTick(() => {
					this.showPicker = true
				})
			},
			handlePickerConfirm(val) {
				const {
					value
				} = val
				console.log('vlaue ', val, value);
				this.ruleForm[this.pickerKey] = value[0]

				if (this.pickerKey == 'brandTitle') {
					this.handleGetProducts()
				}

				this.handlePickerClose()
			},
			handlePickerClose() {
				this.pickerKey = null
				this.showPicker = false
			},
			handleScanClose() {
				this.showScan = false
			},

		}
	}
</script>

<style lang="scss" scoped>
	::v-deep {
		.u-form {
			width: 100%;
		}

		.u-form-item {
			width: 100%;
			margin-bottom: 80rpx;
		}

		.u-form-item__body__left__content__label {
			font-weight: 600;
		}
	}

	.page-container {
		width: 100%;
		height: 100%;
		padding: 20% 10% 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 15%;

		.register-title {
			padding: 10rpx 0;
			width: 100%;
			font-size: 36rpx;
			color: #000;
			line-height: 66rpx;
			border-bottom: 4rpx solid $u-primary;
		}

		.register-item {
			padding: 15rpx;
			text-align: center;
			border-bottom: 1rpx solid #ccc;
		}

		.register-button {
			width: 100%;

			button {
				width: 50%;
			}
		}
	}
</style>